<template>
  <Modal
    width="580"
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    title="图片浏览"
  >
    <div class="modal-main">
      <img :src="imgSrc" :alt="imgAlt">
    </div>
  </Modal>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    imgAlt: {
      type: String,
      default: ''
    },
    imgSrc: {
      type: String,
      default: ''
    }
  },
  methods: {
    cancel() {
      this.config = false;
    }
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 30px 40px 50px;
  max-height: 500px;
  overflow-x: auto;

  img {
    max-width: 500px;
  }
}
</style>